Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: show sending status of verification emails in signup form. #7065

Merged
merged 5 commits into from
Dec 2, 2024

Conversation

zly199
Copy link
Contributor

@zly199 zly199 commented Nov 22, 2024

What type of PR is this?
/kind feature

What this PR does / why we need it:
This PR modifies the behavior of the "Send" button for sending verification codes. Now, when the button is clicked, it immediately shows a "Sending..." state, improving user experience by providing instant feedback. After a successful request, a countdown is displayed. This makes the process clearer for users and reduces confusion during waiting time.

Which issue(s) this PR fixes:
Fixes #7064

Special notes for your reviewer:
Please review the implementation for consistent UI behavior and ensure no race conditions occur if the button is clicked multiple times quickly.

Does this PR introduce a user-facing change?
Improved user experience for sending verification codes: the button now immediately shows

注册表单的邮件验证按钮支持显示发送状态。

…ton, start countdown only after successful request
@f2c-ci-robot f2c-ci-robot bot added the kind/feature Categorizes issue or PR as related to a new feature. label Nov 22, 2024
@f2c-ci-robot f2c-ci-robot bot requested review from LIlGG and ruibaby November 22, 2024 14:43
@f2c-ci-robot f2c-ci-robot bot added the do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. label Nov 22, 2024
@CLAassistant
Copy link

CLAassistant commented Nov 22, 2024

CLA assistant check
All committers have signed the CLA.

application/src/main/resources/static/js/main.js Outdated Show resolved Hide resolved
application/src/main/resources/static/js/main.js Outdated Show resolved Hide resolved
@ruibaby
Copy link
Member

ruibaby commented Nov 28, 2024

看了一下最新的代码,感觉改动有点复杂了,并且 sendVerificationCode 这个方法不止是注册这里在用,如果修改了参数,其他使用的地方也需要修改。

我这里尝试修改了一下,但是你是用 main 分支提交的 PR,我这边没有办法直接推送到这个 PR,所以下面贴出改动,你可以参考下。

diff --git a/application/src/main/resources/static/js/main.js b/application/src/main/resources/static/js/main.js
index 241caa097..269b35a52 100644
--- a/application/src/main/resources/static/js/main.js
+++ b/application/src/main/resources/static/js/main.js
@@ -90,9 +90,11 @@ const Toast = (function () {
 function sendVerificationCode(button, sendRequest) {
     let timer;
     const countdown = 60;
+    const originalButtonText = button.textContent;

     button.addEventListener("click", () => {
         button.disabled = true;
+        button.textContent = i18nResources.sendVerificationCodeSending;
         sendRequest()
             .then(() => {
                 startCountdown();
@@ -100,6 +102,7 @@ function sendVerificationCode(button, sendRequest) {
             })
             .catch((e) => {
                 button.disabled = false;
+                button.textContent = originalButtonText;
                 if (e instanceof Error) {
                     Toast.error(e.message);
                 } else {
@@ -119,7 +122,7 @@ function sendVerificationCode(button, sendRequest) {
                 remainingTime--;
             } else {
                 clearInterval(timer);
-                button.textContent = "Send";
+                button.textContent = originalButtonText;
                 button.disabled = false;
                 button.classList.remove("disabled");
             }
diff --git a/application/src/main/resources/templates/gateway_fragments/common.html b/application/src/main/resources/templates/gateway_fragments/common.html
index 127692d41..d95fa4020 100644
--- a/application/src/main/resources/templates/gateway_fragments/common.html
+++ b/application/src/main/resources/templates/gateway_fragments/common.html
@@ -8,6 +8,7 @@
         const i18nResources = {
             sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
             sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
+            sendVerificationCodeSending: `[(#{js.sendVerificationCode.sending})]`,
             passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
         };
     </script>
@@ -209,4 +210,4 @@
             <span th:text="#{returnToSite}"></span>
         </a>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/application/src/main/resources/templates/gateway_fragments/common.properties b/application/src/main/resources/templates/gateway_fragments/common.pro
perties
index 22053bc75..526bdbe51 100644
--- a/application/src/main/resources/templates/gateway_fragments/common.properties
+++ b/application/src/main/resources/templates/gateway_fragments/common.properties
@@ -1,6 +1,7 @@
 socialLogin.label=社交登录
 js.sendVerificationCode.success=发送成功
 js.sendVerificationCode.failed=发送失败,请稍后再试
+js.sendVerificationCode.sending=发送中...
 js.passwordConfirmation.failed=确认密码不匹配

 signupNotice.description=没有账号?
diff --git a/application/src/main/resources/templates/gateway_fragments/common_en.properties b/application/src/main/resources/templates/gateway_fragments/common_
en.properties
index 70af7ab8d..ef1ab42f4 100644
--- a/application/src/main/resources/templates/gateway_fragments/common_en.properties
+++ b/application/src/main/resources/templates/gateway_fragments/common_en.properties
@@ -1,6 +1,7 @@
 socialLogin.label=Social Login
 js.sendVerificationCode.success=Sent Successfully
 js.sendVerificationCode.failed=Sending Failed, Please Try Again Later
+js.sendVerificationCode.sending=Sending...
 js.passwordConfirmation.failed=Password confirmation does not match

 signupNotice.description=Don't have an account?
diff --git a/application/src/main/resources/templates/gateway_fragments/common_es.properties b/application/src/main/resources/templates/gateway_fragments/common_
es.properties
index db6c8cef4..e786b10d3 100644
--- a/application/src/main/resources/templates/gateway_fragments/common_es.properties
+++ b/application/src/main/resources/templates/gateway_fragments/common_es.properties
@@ -1,6 +1,7 @@
 socialLogin.label=Inicio de Sesión Social
 js.sendVerificationCode.success=Enviado con éxito
 js.sendVerificationCode.failed=Error al enviar, por favor intente nuevamente más tarde
+js.sendVerificationCode.sending=Enviando...
 js.passwordConfirmation.failed=La confirmación de la contraseña no coincide

 signupNotice.description=¿No tienes una cuenta?
diff --git a/application/src/main/resources/templates/gateway_fragments/common_zh_TW.properties b/application/src/main/resources/templates/gateway_fragments/comm
on_zh_TW.properties
index 63129e166..c06c3afd1 100644
--- a/application/src/main/resources/templates/gateway_fragments/common_zh_TW.properties
+++ b/application/src/main/resources/templates/gateway_fragments/common_zh_TW.properties
@@ -1,6 +1,7 @@
 socialLogin.label=社交登入
 js.sendVerificationCode.success=發送成功
 js.sendVerificationCode.failed=發送失敗,請稍後再試
+js.sendVerificationCode.sending=發送中...
 js.passwordConfirmation.failed=確認密碼不匹配

 signupNotice.description=沒有帳號?

@ruibaby
Copy link
Member

ruibaby commented Nov 28, 2024

CLA assistant check Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.You have signed the CLA already but the status is still pending? Let us recheck it.

合并之前需要签署一下 CLA。

Removed unnecessary parameters for button text during verification code sending process. Introduced localization for "Sending..." status message, enhancing user feedback in different languages.
@zly199
Copy link
Contributor Author

zly199 commented Dec 1, 2024

抱歉, 没注意到最新的version的修改以及其他引用, 已做修正, 麻烦再看下了,感谢;

Copy link

sonarcloud bot commented Dec 2, 2024

@ruibaby ruibaby changed the title feat: Show "Sending..." state immediately after clicking the send but… feat: show sending status of verification emails in signup form. Dec 2, 2024
Copy link
Member

@ruibaby ruibaby left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

感谢 @zly199 的贡献

@f2c-ci-robot f2c-ci-robot bot added the lgtm Indicates that a PR is ready to be merged. label Dec 2, 2024
Copy link

f2c-ci-robot bot commented Dec 2, 2024

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ruibaby

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@f2c-ci-robot f2c-ci-robot bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Dec 2, 2024
@f2c-ci-robot f2c-ci-robot bot merged commit 568c7d2 into halo-dev:main Dec 2, 2024
3 checks passed
@f2c-ci-robot f2c-ci-robot bot added release-note Denotes a PR that will be considered when it comes time to generate release notes. and removed do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. labels Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. kind/feature Categorizes issue or PR as related to a new feature. lgtm Indicates that a PR is ready to be merged. release-note Denotes a PR that will be considered when it comes time to generate release notes.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

注册页面, 点击邮件发送按钮, 如果邮件服务器响应时间过长, 页面假死, 且没有提示
3 participants